<template>
	<view class="content">
		<!-- 首页视频滑动 -->
		<view class="container" @touchstart="start" @touchend="end">
			<u-popup :show="show" mode="top" @close="close" @open="open">
				<view class="containerVideo">
					<video id="myVideo"
						src="https://static.vlian.cn:8090/files/vlian/files/37/1661270400/min_df15a9a2ff2d8f882bd8ee4102d5baeb.mp4"
						:controls="false" :muted="true" @ended="ended" ref="video"></video>
				</view>
				<view class="overlay">
					<view class="small" @click="gotoPage(0)">
						<text class="text">进入盼盼</text>
						<view class="tubiao">
							<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
						</view>
					</view>
					<view class="small" @click="gotoPage(1)">
						<text class="text">楼盘列表</text>
						<view class="tubiao">
							<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
						</view>
					</view>
					<view class="small" @click="gotoPage(2)">
						<text class="text">地图找房</text>
						<view class="tubiao">
							<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
						</view>
					</view>
					<view class="small" @click="gotoPage(3)">
						<text class="text">盼盼+</text>
						<view class="tubiao">
							<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
						</view>
					</view>
				</view>
				<view class="ejectText">上划进入盼盼租房⬆</view>
			</u-popup>
		</view>
		<!-- 搜索 地址列表 -->
		<view class="text-area">
			<view class="left" @click="toaddressList"> <text>{{val}}</text>
				<u-icon name="arrow-down-fill" size="10"></u-icon>
			</view>
			<view class="right" @click="toSearch">|
				<u-icon name="search" size="15" color="#ebedf0"></u-icon>
				<text>大家都搜建业花园里</text>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="sw">

			<view class="container" @touchstart="start" @touchend="end">
				<u-swiper :list="imageList" indicator indicatorMode="line" circular height="1000rpx" @click="gotoGoodsxq"></u-swiper>
			</view>
		</view>
		<!-- 导航栏 -->
		<view class="dhl">
			<view class="dh" v-for="(it,i) in titlelist" :key="i" @click="gotoPage(i)">
				<view class="dh_txt">
					{{it}}
				</view>
				<view class="dh_icon">
					<view class="dh_icon_c">></view>
				</view>
			</view>
		</view>
		<!-- 我要推荐和房贷计算 -->
		<view class="tj">
			<view class="tj_left" @click="gotoLogin">
				<u--image
					src="https://img2.baidu.com/it/u=4248533344,2295565255&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=710"
					width="80rpx" height="80rpx" shape="circle"></u--image>
				<view class="tj_r">
					<text class="tj_left_title">我要推荐</text>
					<view class="tj_lj">
						立即推荐
						<u-icon name="arrow-right" size="12"></u-icon>
					</view>
				</view>

			</view>
			<view class="tj_right" @click="gotoCalculate">
				<u--image
					src="https://img2.baidu.com/it/u=4248533344,2295565255&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=710"
					width="80rpx" height="80rpx" shape="circle"></u--image>
				<view class="tj_r">
					<text class="tj_right_title">房贷计算器</text>
					<view class="tj_lj">
						立即推荐
						<u-icon name="arrow-right" size="12"></u-icon>
					</view>
				</view>

			</view>
		</view>
		<!-- 盼盼动态 -->
		<view class="dynamic" @click="gotoTrends">
			<view class="dynamic_jy">
				<view class="jd">
					<u--image :showLoading="true" radius="16"
						src="https://img2.baidu.com/it/u=4248533344,2295565255&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=710"
						width="40px" height="40px"></u--image>
				</view>
				<u-notice-bar :text="text1" direction="column" icon=" " height="20" bgColor="#fff" color="#000" url=""
					fontSize="16" mode="link"></u-notice-bar>
			</view>

		</view>

		<!-- 房屋列表 -->
		<view>
			<view class="lptitle">
				<view class="lptitle_left">推荐好盘</view>
				<view class="lptitle_right">更多好盘 <u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
				</view>
			</view>
			<houseDetails :list='lpList'></houseDetails>
		</view>
		<!-- 盼盼顾问 -->
		<template>
			<view class="lptitle">
				<view class="lptitle_left">盼盼顾问</view>
				<view class="lptitle_right" @click="gotoMoregw">更多顾问 <u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
				</view>
			</view>
			<u-scroll-list :indicator="indicator" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c"
				indicatorWidth="100" indicatorBarWidth="50">
				<view v-for="(item, index) in list" :key="index" class="gw">
					<view class="pp_img">
						<u--image :src="item.head" shape="circle" width="80rpx" height="80rpx"></u--image>
					</view>
					<view class="title_pp">
						<view class="pp_name">{{item.name}}</view>
						<text class="pp_text">{{item.text}}</text>
					</view>
					<view class="pp_icon">
						<u-icon name="more-circle" color="#2979ff" size="28"  @click="gotoAdviser"></u-icon>
						<u-icon name="phone" color="#2979ff" size="28" @click="gotoAdviser"></u-icon>
						
					</view>
				</view>
			</u-scroll-list>
		</template>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicator: true,
				list: [{
					id: '01',
					head: 'https://img0.baidu.com/it/u=1065676948,2711080597&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
					name: '冯坡',
					text: '登封盼盼君邻大院山前',
				}, {
					id: '02',
					head: 'https://img0.baidu.com/it/u=727074987,2962091239&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
					name: '杨晓雨',
					text: '登封盼盼嵩岳府',
				}, {
					id: '03',
					head: 'https://img0.baidu.com/it/u=392103464,3709925827&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
					name: '井甜甜',
					text: '登封盼盼嵩岳府',
				}, {
					id: '04',
					head: 'https://img0.baidu.com/it/u=4196246185,733940017&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
					name: '王瑾',
					text: '郑州盼盼君邻大院松苑',
				}, {
					id: '05',
					head: 'https://img2.baidu.com/it/u=3906486889,2359009677&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
					name: '陶金',
					text: '郑州盼盼君邻大院松苑',
				}],
				imageList: ['https://hbimg.b0.upaiyun.com/a7805c0677da95d3c8c9d5739fdf9bcbb6cbb02a14155-PEV3Eh_fw658',
					'https://hbimg.b0.upaiyun.com/a7805c0677da95d3c8c9d5739fdf9bcbb6cbb02a14155-PEV3Eh_fw658',

					'https://www.5tu.cn/attachments/image_files/month_1703/2017031321530105291.jpg',
					'https://hbimg.b0.upaiyun.com/53ac050f3947bcfee095e94e8eceb9f5f47125231fa69-QqHucd_fw658'
				],
				//地址的值
				val: '崇州市',
				titlelist: ['走进盼盼', '一键找房', '地图找房', '盼盼+'],
				show: false,
				// 触摸的定位
				startData: {
					clientX: '',
					clientY: ''
				},
				text1: ['盼盼党史学习教育', '盼盼集团与中原银行签署100亿', '遇鉴|匠心│古城心—府藏', '盼盼党史学习教育'],
				lpList: []
			}
		},
		onLoad() {

			this.$api({
				url: '/lp',
				successCB: res => {
					console.log(res.data.data);
					this.lpList = res.data.data
				}
			})
			// #ifdef MP-WEIXIN
			let videoContext = wx.createVideoContext("myVideo");
			// #endif
			this.show = true

			// #ifdef MP-WEIXIN
			wx.nextTick(() => {
				videoContext.play()
			})
			// #endif
			// #ifndef MP-WEIXIN
			this.$nextTick(() => {
				this.$refs.video.play()
			})
			// #endif


		},
		onShow() {

			let value = uni.getStorageSync('value')
			if (value) {
				this.val = value
				uni.removeStorageSync('value')
			}

		},
		onReady() {





		},
		methods: {
			//轮播跳转
			gotoGoodsxq(i){
				// console.log(i);
				uni.navigateTo({
					url:`/pages/goodsxq/goodsxq?id=${i+1}`
				})
			},
			//跳转更多顾问
			gotoMoregw(){
				uni.navigateTo({
					url:'/pages/moregw/moregw'
				})
			},
			// //跳转商品详情
			// togoGoodxq(){
			// 	uni.navigateTo({
			// 		url:"/pages/goodsxq/goodsxq"
			// 	})
			// },
			//跳转盼盼顾问
			gotoAdviser(){
				uni.navigateTo({
					url:'/pages/adviser/adviser'
				})
			},
			//跳转盼盼动态
			gotoTrends() {
				uni.navigateTo({
					url: "/pages/trends/trends"
				})
			},

			//手指移入的位置
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;


			},
			//手指移除的位置
			end(e) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subY > 100) {
					console.log(123);
					this.show = true;
					// #ifdef MP-WEIXIN
					let videoContext = wx.createVideoContext("myVideo");
					wx.nextTick(() => {
						videoContext.play()
					})
					// #endif
					// #ifndef MP-WEIXIN
					this.$nextTick(() => {
						this.$refs.video.play()
					})
					// #endif
					console.log(this.$refs);
					console.log('上下')
				} else {
					if (subX > 50) {
						console.log('右')
					} else if (subY < -10) {
						this.show = false
					} else {
						console.log('无效')
					}
				}
			},
			open() {

			},
			close() {
				// this.show = false
			},
			//视频结束自动上拉
			ended() {
				this.show = false

			},
			//跳转到登录
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			//跳转到地址列表页面
			toaddressList() {
				uni.navigateTo({
					url: '/pages/addressList/addressList',
					animationType: "fade-in",
					animationDuration: 3000
				})
			},
			//跳转到房贷计算器
			gotoCalculate() {
				uni.navigateTo({
					url: '/pages/calculate/calculate',
					animationType: "fade-in",
					animationDuration: 3000
				})
			},
			//点击跳转到其他页面
			gotoPage(i) {
				if (i === 0) {
					uni.navigateTo({
						url: '/pages/enter/enter'
					})
				}
				if (i === 1) {
					uni.switchTab({
						url: '/pages/lp/lp'
					})
				}
				if (i === 2) {
					uni.navigateTo({
						url:'/pages/map/map'
					})
				}
				if (i === 3) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			//跳转搜索页面
			toSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss">
	.lptitle {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 40rpx;

	}

	.lptitle_left {
		font-size: 40rpx;
		margin-left: 20rpx;
	}

	.lptitle_right {
		margin-right: 20rpx;
		color: #ccc;
		display: flex;
		align-items: center;
	}

	/* 盼盼顾问 */
	.gw {
		// background-color: #ccc;
		// margin-left: 20rpx;
		margin: 40rpx 20rpx;
		text-align: center;
		// margin-top: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx #ccc;

		// margin: 0 auto;
		.pp_img {
			margin: 0 auto;
			text-align: center;
			padding: 40rpx 140rpx;
		}

		.title_pp {
			.pp_name {
				margin-bottom: 20rpx;
			}

			.pp_text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 18rpx;
			}
		}
		.pp_icon{
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 30rpx;
		}
	}

	.text-area {
		position: fixed;
		top: 40rpx;
		left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 450rpx;
		height: 50rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 80rpx;
		font-size: 20rpx;
		z-index: 10;

	}

	.left,
	.right {
		display: flex;

	}

	/deep/.u-icon__icon {
		margin-left: 20rpx;
		margin-top: 5rpx;
	}

	.right {
		color: #ebedf0;
	}

	.dhl {
		display: flex;
		justify-content: space-around;
	}

	.dh {
		border-radius: 10rpx;
		margin-top: 40rpx;
		width: 170rpx;
		height: 180rpx;
		background-color: rgba(240, 250, 240, 0.5);
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;


	}

	.dh_txt {
		margin-bottom: 20rpx;
		font-size: 20rpx;
	}

	.dh_icon {
		display: flex;
		justify-content: center;
	}

	.dh_icon_c {
		font-size: 30rpx;
		font-weight: 700;
		height: 40rpx;
		width: 40rpx;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 50%;
		text-align: center;
		line-height: 35rpx;
		color: #fff;
	}

	.container {
		height: 100%;
	}

	video {
		height: 95vh;
		width: 100vw;
		z-index: 1;
	}

	.ejectText {
		position: absolute;
		bottom: 8%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9;
		color: #ffffff;
	}

	.containerVideo {
		position: relative;
		z-index: 0;
	}

	.overlay {
		position: absolute;
		bottom: 20%;
		left: 0;
		z-index: 9;
		color: #ffffff;
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}

	.small {
		float: left;
		width: 20vw;
		height: 11vh;
		border: 1px solid #f1f1f1;
		border-radius: 20rpx;
		background-color: rgba(231, 231, 231, 0.25);
		position: relative;
		/* margin-left: 30rpx; */
	}

	/deep/.u-popup__content {
		background-color: rgba(0, 0, 0, 0);
	}

	/deep/.u-icon__icon {
		margin-top: 5rpx;
		margin-left: 6rpx;
	}

	.tubiao {
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.6);
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translate(-50%, -50%);
	}

	.text {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
	}

	.tj {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
	}

	.tj_right,
	.tj_left {
		background-color: rgba(240, 250, 240, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;

	}

	.tj_r {
		margin-left: 20rpx;
	}

	.tj_right_title,
	.tj_left_title {
		font-size: 28rpx;
		margin-bottom: 30rpx;

	}

	.tj_lj {
		font-size: 20rpx;
		display: flex;
		margin-top: 10rpx;
		color: #333;
	}

	.dynamic {
		margin: 40rpx 30rpx;
	}

	.dynamic_jy {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 20rpx;
		box-shadow: 0 0 10px #ccc;
		padding: 30rpx 20rpx;
	}

	/deep/.u-notice-bar {
		padding: 25rpx 20rpx !important;
	}
</style>
